<template>
    <div class="faceRecognition">
        <form target="iframe_1" id="form1" action="https://api-cn.faceplusplus.com/facepp/v3/detect" method="post" enctype="multipart/form-data">
            <div class="btnBox">
                <input style="display:none;" type="text" name="api_key" :value="params.api_key">
                <input style="display:none;" type="text" name="api_secret" :value="params.api_secret">
                <input style="display:none;" type="text" name="return_attributes" :value="params.return_attributes">
                <!-- 能否直接打开手机的摄像头 -->
                <input name="image_file" type="file" accept="image/*" capture="camera" id="file" @change="change"> 
                <p>选择照片上传</p>
            </div>
        </form>
        <iframe id="iframe_1" name="iframe_1" style="display:none;"></iframe>
        <div class="faceContentBox">
            <img class="faceImg" v-if="imgurl" :src="imgurl" alt="咩有图片" @click="change" title="点击图片刷新">
            <div class="facebox">
                <p v-if="picData.data&&picData.data.faces">年龄：{{picData.data.faces[0].attributes.age.value}}</p>
                <p v-if="picData.data&&picData.data.faces">性别：{{picData.data.faces[0].attributes.gender.value=="Female"?"女":"男"}}</p>
                <p v-if="picData.data&&picData.data.faces">颜值：{{picData.data.faces[0].attributes.beauty.female_score}} -- {{picData.data.faces[0].attributes.beauty.male_score}}</p>
                <p v-if="picData.data&&picData.data.faces">生气指数：{{picData.data.faces[0].attributes.emotion.anger}}</p>
                <p v-if="picData.data&&picData.data.faces">厌恶指数：{{picData.data.faces[0].attributes.emotion.disgust}}</p>
                <p v-if="picData.data&&picData.data.faces">恐惧指数：{{picData.data.faces[0].attributes.emotion.fear}}</p>
                <p v-if="picData.data&&picData.data.faces">高兴指数：{{picData.data.faces[0].attributes.emotion.happiness}}</p>
                <p v-if="picData.data&&picData.data.faces">平静指数：{{picData.data.faces[0].attributes.emotion.neutral}}</p>
                <p v-if="picData.data&&picData.data.faces">伤心指数：{{picData.data.faces[0].attributes.emotion.sadness}}</p>
                <p v-if="picData.data&&picData.data.faces">惊讶指数：{{picData.data.faces[0].attributes.emotion.surprise}}</p>
                <p v-if="picData.isFirstTime">数据过于强大，未计算出来，请点击图片重新加载</p>
            </div>
        </div>
        <WaitAnimation v-if="picData.isLoading"></WaitAnimation>
    </div>
</template>

<script>
    import '../../../assets/js/jquery_form.js'
    import WaitAnimation from '../WaitAnimation/WaitAnimation'
    export default {
        name: '',
        data() {
            return {
                imgurl: null,
                picData: {
                    isLoading: false,
                    dataBack: false, //人脸数据是否返回了
                    data: null,
                    isFirstTime:false,
                },
                params: {
                    api_key: 'KNBK1PbsU3nKrvTG3wUqhUR8YXUo9dkk',
                    api_secret: 'NKjGGwW5bogSDiKtnU4o-R97FuR1SMUW',
                    return_attributes: 'age,beauty,gender,facequality,blur,eyestatus,emotion,mouthstatus,skinstatus,headpose'
                }
            }
        },
        methods: {
            // file改变时触发
            change() {
                var _this = this
                this.picData.dataBack=false
                var r = new FileReader();
                var f = document.getElementById('file').files[0]
                r.readAsDataURL(f);
                r.onload = function (e) {
                    _this.imgurl = r.result
                    _this.submit()
                };
            },
            // form1提交时触发
            submit() {
                var time = 0;
                this.picData.isLoading = true;
                this.picData.data=null
                this.picData.isFirstTime=false
                var setTime = setInterval(() => {
                    time++
                    if (this.picData.dataBack) {
                        // console.log(this.picData.data.faces[0].attributes)
                        clearInterval(setTime)
                        this.resetSize()
                        this.picData.isFirstTime=false
                        this.picData.isLoading = false;
                    } else {
                        $('#form1').submit()
                    }
                    if (time > 4) {
                        this.picData.isLoading = false;
                        this.picData.isFirstTime=true
                        clearInterval(setTime)
                    }

                }, 1000)
            },
            // 调整facebox的大小
            resetSize() {
                $('.faceRecognition').css({
                    height: $(window).height() - 66
                })
                $('.facebox').css({
                    height: $('.faceContentBox').height() - $('.faceImg').height() - 20
                })
            },
            // 监听iframe
            iframeListen(){
                var _this = this
                $("#form1").ajaxForm(function (data) {
                    // console.log("post success." , data) //data为检测的结果
                    _this.picData.dataBack = true
                    _this.picData.data = data
                });
            }
        },
        components: {
            WaitAnimation,
        },
        mounted() {
            
            this.resetSize()
            this.iframeListen()
            console.log(document.getElementsByClassName('btnBox'))

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .faceRecognition {
        height: 300px;
    }

    .btnBox {
        padding: 10px 0;
        position: relative;
        width: 30%;
        margin: 0 auto;
    }

    #file {
        width: 100%;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .btnBox p {
        height: 30px;
        line-height: 30px;
        color: white;
        background-color: black;
        border-radius: 10px;
        box-shadow: 6px 1px 5px 3px rgba(194, 185, 185, 0.58);
    }

    .faceContentBox {
        position: absolute;
        width: 100%;
        top: 86px;
        bottom: 30px;

    }

    img {
        width: 250px;
    }

    .facebox {
        margin-top: 10px;
        /* max-height: 150px; */
        overflow-y: auto;
        overflow-x: hidden;
    }
    .facebox::-webkit-scrollbar {display:none}
</style>